<template>
  <router-link
    tag="ul"
    class="every-music"
    to=""
    :style="{ paddingLeft: shownum ? '40px' : '10px' }"
  >
    <li @click="play(item)" class="bot" v-for="(item, index) in songlist" :key="index">
      <div v-if="shownum" :class="['shownum', { red: index < 3 }]">
        {{ index | fillternum }}
      </div>
      <div>
        <div v-html="$options.filters.highKey(item.name, keywords)"></div>
        <div>
          <i v-show="item.song.privilege.maxbr == 999000"></i>
          <b v-for="(artit, ind) in item.song.artists" :key="ind">
            <!-- {{ artit.name }} -->
            <em v-html="$options.filters.highKey(artit.name, keywords)"></em>
            {{ index | filterSinger(item.song.artists.length) }}
          </b>
          -
          <em
            v-html="$options.filters.highKey(item.song.album.name, keywords)"
          ></em>
        </div>
      </div>
       <playing v-if="playMUsicID==item.id"></playing>
      <span v-else @click="play(item)"></span>
    </li>
  </router-link>
</template>

<script>
export default {
  props: {
    songlist: {
      type: [Array, Object, String],
    },
    shownum: {
      type: Boolean,
      default: false,
    },
    keywords: {
      type: String,
      default: "",
    },
    playMUsicID: {
      type: Number,
    },
  },
  methods:{
    play(item){
      this.$emit('play', item);
    }
  },
  filters: {
    filterSinger(val, num) {
      return val < num - 1 ? " / " : "";
    },
    fillternum(val) {
      val++;
      return val < 10 ? "0" + val : val;
    },
    //关键字高亮
    highKey(val, keywords) {
      let reg = new RegExp(`${keywords}`, "g");
      if (reg.test(val)) {
        //把关键词 替换成 <b style="color:red">关键词</b>
        val = val.replace(reg, `<b style="color:#507daf">${keywords}</b>`);
      }
      return val;
    },
  },
};
</script>

<style lang="less" scoped>
.every-music {
  padding-left: 40px;
  position: relative;
  .bot {
    display: flex;
    align-items: center;
    padding: 6px 0px;
    div.shownum {
      &.shownum {
        left: 4px;
        color: #888;
        position: absolute;
        padding: 0px 5px;
        font-size: 17px;
      }
      &.red {
        color: #df3436;
      }
    }
    div {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-wrap: normal;
      word-break: normal;
      color: #333;
      font-size: 17px;
      &:nth-child(2) {
        i {
          display: inline-block;
          width: 12px;
          height: 8px;
          background: url(https://s3.music.126.net/mobile-new/img/index_icon_2x.png?5207a28c3767992ca4bb6d4887c74880=);
          background-repeat: no-repeat;
          background-size: 166px 97px;
          margin-right: 4px;
        }
        font-size: 12px;
        color: #888;
      }
    }
    span {
      display: inline-block;
      width: 22px;
      height: 22px;
      background: url(https://s3.music.126.net/mobile-new/img/index_icon_2x.png?5207a28c3767992ca4bb6d4887c74880=);
      background-repeat: no-repeat;
      background-position: -24px 0px;
      background-size: 166px 97px;
      padding: 0 10px;
      // position: absolute;
      // right: 0px;
    }
    border-bottom: 1px solid #eee;
  }
}
</style>